import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { StyleSheet, View, Text ,Image, TouchableOpacity} from 'react-native'
import screen from '../../utils/screen'



const summary = ""

const arrowUp = require('../../images/arrowup.png')
const arrowDown = require('../../images/arrowdown.png')

export default class extends PureComponent {
  static propTypes = {
    content: PropTypes.any,
    times: PropTypes.any,
    onCellPress: PropTypes.any,
  }
  constructor(props) {
    super(props)
  }
  navigateTo = () => {
    if(this.props.onPress) {
      this.props.onPress()
    }
  }
  renderChouView = (chou) => {
    let chouView = ""
    if(chou >= 0) {
      chouView = "+" + chou + "%"
      return (
          <View style={{flexDirection: "row"}}>
            <Text style={styles.cellChou}>同比&nbsp;</Text>
            <Image resizeMode="stretch" style={{height: 15, width: 8}} source={arrowUp} />
            <Text style={[styles.cellChou,{color: 'red'}]}>&nbsp;{chouView}</Text>
          </View>
      )
    } else {
      chouView = chou + "%"
      return (
          <View style={{flexDirection: "row"}}>
            <Text style={styles.cellChou}>同比&nbsp;</Text>
            <Image resizeMode="stretch" style={{height: 15, width: 8}} source={arrowDown}/>
            <Text style={[styles.cellChou, {color: 'green'}]}>&nbsp;{chouView}</Text>
          </View>
      )
    }
  }

  render() {
    const { content,times } = this.props;
    return (
        <View style={styles.container}>
          <View style={styles.content}>
            {
              content.map((val = {}, index) => {
                return (
                    <TouchableOpacity key={index} style={[styles.cell]} onPress={() => {
                      this.props.onCellPress && this.props.onCellPress()
                    }}>
                    <Text style={styles.cellZi}>{val.zi}</Text>
                    <Text style={styles.cellYin}>{val.yin}</Text>
                    {
                      this.renderChouView(val.chou)
                    }
                    </TouchableOpacity>
                )
              })
            }
          </View>
          <View style={{margin: screen.pxToDp(20)}}><Text style={styles.bottomText}>数据已更新至北京时间: {times || ""}</Text></View>
        </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginVertical: screen.pxToDp(26),
  },
  content: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    alignItems: 'flex-start'
  },
  cell: {
    minWidth: screen.pxToDp(200),
    flex: 1,
    marginVertical: screen.pxToDp(20),
    alignItems: 'center'
  },
  cellZi: {
    color: '#636363',
    fontSize: screen.pxToDp(28),
    textAlign: 'center'
  },
  cellChou: {
    color: '#636363',
    fontSize: screen.pxToDp(20),
    textAlign: 'center'
  },
  cellYin: {
    color: '#1296db',
    fontSize: screen.pxToDp(30),
    textAlign: 'center'
  },
  bottomText: {
    fontSize: screen.pxToDp(20),
    color: '#7a7a7a'
  },
  red: {
    backgroundColor: 'red'
  },
  green: {
    backgroundColor: 'green'
  },
  blue: {
    backgroundColor: 'blue'
  }
})
